<template>
  <div class="recommend">
    <div class="title"><span class="title-left">热门礼包</span><router-link to="/gift" class="title-right" tag="span">更多<i class="icon iconfont icon-jiantouxi"></i></router-link></div>
    <ul class="item-list">
      <router-link tag="li" class="item border-bottom" v-for="item of RecommendList" to="" :key="item.id">
        <img class="item-img" :src="item.imgUrl" alt="">
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">点击领取</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeGift',
  data () {
    return {
      RecommendList: [
        {
          id: '001',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813120157/80499494570bf6d7b564af5c9371d32c.png',
          title: '英雄杀-送现金',
          desc: '赛尔豆*1000，高级精灵胶囊*3，高级体力药剂*3，符娅*1'
        }, {
          id: '002',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813115608/78a0502e13be4ced5852d126168a138c.png',
          title: '全民水浒',
          desc: '赛尔豆*1000，高级精灵胶囊*3，高级体力药剂*3，符娅*1'
        }, {
          id: '003',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813135610/e2fb8c464a8e270a08512f08f514764c.png',
          title: '热血传奇-跨服新大陆',
          desc: '赛尔豆*1000，高级精灵胶囊*3，高级体力药剂*3，符娅*1'
        }, {
          id: '004',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813114709/5dacee15f18d749215ad4ae952924fa0.png',
          title: '火影忍者-疾风传',
          desc: '赛尔豆*1000，高级精灵胶囊*3，高级体力药剂*3，符娅*1'
        }, {
          id: '005',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813134322/993e840576e65930fecea83591238b76.png',
          title: '天天富翁',
          desc: '赛尔豆*1000，高级精灵胶囊*3，高级体力药剂*3，符娅*1'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    overflow: hidden
    line-height: .8rem
    background: #f5f5f5
    padding: 0 .2rem
    .title-left
      float: left
    .title-right
      float: right
  .item-list
    margin: 0 .24rem
  .item
    overflow: hidden
    display flex
    height: 1.8rem
    .item-img
      width: 1.4rem
      height: 1.4rem
      padding: .2rem 0
      border-radius: .4rem
    .item-info
      flex: 1
      padding: .2rem 0 .2rem .2rem
      min-width: 0
      .item-title
        line-height: .5rem
        font-size: .32rem
        ellipse()
      .item-desc
        ellipse()
        color: #ccc
      .item-button
        line-height: .44rem
        background: #ff9300
        padding: 0 .2rem
        margin-top: .1rem
        border-radius: .06rem
        color: #fff
</style>
